<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
    <p id = 'back' style = 'position: fixed; right: 20px; cursor: pointer; z-index: 99999;'>返回大区</p>
       <div id="container" style="width: 50%; height: 70%; margin: auto; overflow:hidden;"></div>
       <!-- <div id="container" style="width: 100%; height: 100%"></div> -->
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script> -->
       <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script> -->
       <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script> -->
       <!-- <script type="text/javascript" src="henan.js"></script> -->
       <script type="text/javascript" src="china.js"></script>
       <script type="text/javascript" src="henan.js"></script>
       <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script> -->
       <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script> -->
       <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script> -->
       <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script> -->
       <script type="text/javascript">
        var geoCoordMap = {
            '华北地区':[115.1551, 42.2539],
            '华南地区':[ 111.2813, 23.6426],
            '东北地区':[ 128.1445, 45.5156],
            '华东地区':[119.4648, 29.2891],
            '华中地区':[112.8, 31.1572],
            '西南地区':[97.5, 30.1904],
            '西北地区':[91.5996, 39.6396],
        }
        var geoCoordMap2 = {
            '黑龙江':[128.1445, 46.5156],
            '吉林':[ 127.2227, 43.2305],
            '辽宁':[ 124.2676, 41.3086]
        }
    var max = 600, min = 20; // todo 
    var maxSize4Pin = 100, minSize4Pin = 20;
    var convertData = function (geoMap, data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        console.log(res)
        return res;
};
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var data = {
    quyu: {
        name: '',
        mapType: 'china',
        data: [
            {name: '西北地区',value: 440 },
            {name: '华南地区',value: 211 },
            {name: '东北地区',value: 311 },
            {name: '华东地区',value: 511 },
            {name: '华北地区',value: 211 },
            {name: '华中地区',value: 210 },
            {name: '西南地区',value: 151 }
        ]
    },
    sheng: {
        name: '',
        mapType: 'henan',
        data: [
            {name: '黑龙江',value: 180 },
            {name: '辽宁',value: 20},
            {name: '吉林',value: 110},
        ]
    }
}
var quyuname = [
    '西北地区',
    '华南地区',
    '东北地区',
    '华东地区',
    '华北地区',
    '华中地区',
    '西南地区',
]
var sheng = ['黑龙江','辽宁','吉林']

var option = {
    title: {
        text: '测试',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
                console.log(params.value[2])
              if(typeof(params.value)[2] == "undefined"){
              	return params.name + ' : ' + params.value;
              }else{
              	return params.name + ' : ' + params.value[2];
              }
            }
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['测试']
    },
    visualMap: {
        min: 100,
        max: 500,
        left: 'left',
        top: 'bottom',
        seriesIndex: [1],
        inRange: {
            color: ['#DFFEFF', '#0571DE'],
        },
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'bottom',
        feature: {
            // dataView: {readOnly: false},
            // restore: {},
            saveAsImage: {}
        }
    },
	// dataRange: {
        // x: '-1000px',//图例横轴位置
        // y: '-1000px',//图例纵轴位置
        // orient: 'horizontal',
        // min: 0,
        // max: 1000,
        // inRange: {
            // color: ['lightskyblue','yellow', 'orangered']
        // },
        // text: ['高', '低'],           // 文本，默认为数值文本
        // splitList: [
        // {start: 1, end: 1, color: '#b8e1ff'},
        // {start: 2, end: 2, color: '#92d2ff'},
        // {start: 3, end: 3, color: '#18B3FF'},
        // {start: 4, end: 4, color: '#1ea8ed'},
        // {start: 5, end: 5, color: '#1e96ed'},
        // {start: 6, end: 6, color: '#0096ff'},
        // {start: 7, end: 7, color: '#1350eb'},

        // {start: 10, end: 10, color: '#13caeb'},
        // {start: 11, end: 11, color: '#13ebde'},
        // {start: 12, end: 12, color: '#29f18c'},

        
        // {start: 20, end: 20, color: '#f4ad27'},
        // {start: 21, end: 21, color: '#f49f27'},
        // {start: 19, end: 19, color: '#fbd9a9'},

        // 浅 5FABF8  深 4074E5  黄 EFD33D 绿7A9867
        // 兰 0F6FC6 浅蓝 009DD9 青 0BD0D9 浅青 10CF9B 绿 7CCA62 深绿7D9631
       //  http://www.866pic.com/shejiyuansu/1e9733f162f2a1eb11036575.html
        // ],
        // splitNumber: 0
    // },
    geo: {
            show: true,
            map: 'china',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            layoutCenter: ['65%', '50%'],
            layoutSize: '70%',
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#FDDD31',
                }
            },
            

        },
    series: [
    {
            name: '圆点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(geoCoordMap,data.quyu.data),
            symbolSize: function (val) {
                return val[2]/10;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#05C3F9'
                }
            }
        },
        {
            type: 'map',
            map: 'china',
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            layoutCenter: ['60%', '50%'],
            data: data.quyu.data
            
        },
        {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin',
            symbolSize: function (val) {
                var a = (maxSize4Pin - minSize4Pin) / (max - min);
                var b = minSize4Pin - a*min;
                b = maxSize4Pin - a*max;
                return a*val[2]+b;
            },
            label: {
                normal: {
                    formatter: '{@[2]}',
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: '#F62157', //标志颜色
                }
            },
            zlevel: 6,
            data: convertData(geoCoordMap,data.quyu.data),
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(geoCoordMap,data.quyu.data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 5)),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#05C3F9',
                    shadowBlur: 10,
                    shadowColor: '#05C3F9'
                }
            },
            zlevel: 1
        },
    ],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
        return idx * 5;
    }
};
if (option && typeof option === "object") {
    console.log(option)
    echarts.registerMap('china', china)
    myChart.setOption(option, true);
}
function switchMap(mapType, geoMap, data, vm) {
    echarts.registerMap('henan', henan)
    if(vm){
        for(var i = 0; i < quyuname.length; i++){
            if(quyuname.indexOf(vm.name) > -1){
                option.title.text = vm.name;
            }
        }
    }
    option.visualMap.min = vm ? 0 : 100;
    option.visualMap.max = vm ? vm.value : 500;
    option.geo.map = mapType;
    option.series[0].data = convertData(geoMap,data);
    option.series[1].map = mapType;
    option.series[1].data = data;
    option.series[2].data = convertData(geoMap,data);
    option.series[3].data = convertData(geoMap,data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 5));
    myChart.setOption(option, true);
}

myChart.on('click', function(vm){
    switchMap('henan',geoCoordMap2, data.sheng.data, vm);
})
var back = document.getElementById('back')
back.onclick = function() {
    switchMap('china',geoCoordMap, data.quyu.data);
}
window.addEventListener("resize", function() {
    myChart.resize();
 });
       </script>
   </body>
</html>